<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <style>
        body{margin: 0;padding: 0;}
        select,input{width: 180px;float: left;margin: 5px 2px;}
        tr,tbody{transition: all .5s;}
        #table{margin: 0 auto;}
        #btn{width: 426px;margin: 15px auto 10px;}
    </style>
</head>

<body>
    <div class="box">
        <div id="btn">
            <button id="btn1">刷新列表</button>
            <button id="btn2">上增表格行</button>
            <button id="btn3">下增表格行</button>
            <button id="btn4">随机删除行</button>
        </div>
        <table id="table">
            <tr>
                <td><input type="text" value="00"></td>
                <td>
                    <select class="aaa">
                        <option value="111">111</option>
                        <option value="222">222</option>
                        <option value="333">333</option>
                        <option value="444">444</option>
                    </select>
                </td>
                <td><input type="text" value="11"></td>
                <td><input type="text" value="22"></td>
            </tr>
            <tr>
                <td>
                    <select>
                        <option value="111">111</option>
                        <option value="222">222</option>
                        <option value="333">333</option>
                        <option value="444">444</option>
                    </select>
                </td>
                <td><input type="text" value="55"></td>
                <td><input type="text" value="66"></td>
                <td><input type="text" value="77"></td>
            </tr>
            <tr>
                <td><input type="text" value="88"></td>
                <td><input type="text" value="99"></td>
                <td><input type="text" value="aa"></td>
                <td><input type="text" value="bb"></td>
            </tr>
        </table>
    </div>
    
    <script src="jquery.js"></script>
    <script src="TCSwitch.js"></script>
    <script>
        var tpl = $('#table tbody').clone();
        var trs = tpl.find('tr').clone();
        var tab = new TCSwitch('#table');
        $('button').click(function(){
            var len = $('#table tr').length;
            var num = Math.round(2*Math.random());
            var random_dom = trs.eq(num).clone();
            if(this.id == 'btn1'){
                $('#table').empty().append(tpl.clone());
            }
            if(this.id == 'btn2'){
                $('#table tbody').prepend(random_dom);
            }
            if(this.id == 'btn3'){
                $('#table tbody').append(random_dom);
            }
            if(this.id == 'btn4'){
                var num4 = Math.round($('#table tr').length*Math.random());
                $('#table tr').eq(num4).remove();
            }
            tab.update();
        })
    </script>
</body>

</html>